<template>
  <div class="container">
    <h1 @click="changeTestTitle">{{testTitle}}</h1>
    <div>
      <input type="text" class="inputText" ref="inputText" @keyup.enter="emptyInput">
    </div>
    <!-- 进行中 -->
    <WorkingTodo />
    <!-- 已完成 -->
    <CompleteTodo />
  </div>
</template>

<script>
import { reactive, ref, onMounted, toRefs, toRef, watchEffect, } from 'vue';
import CompleteTodo from './components/TodoList/CompleteTodo'
import WorkingTodo from './components/TodoList/WorkingTodo'
import { todoState } from './reactiveState/todoState'

export const testState = reactive({
  testTitle: 'todolist',
  changeTestTitle: () => { 
    testState.testTitle = 'changTitle' 
  }
})
export default {
  name: "Win10DatePanel",
  components: { CompleteTodo, WorkingTodo },
  setup() {

    const inputText = ref(null)
    const emptyInput = () => {
      todoState.changeTodoList(inputText.value.value)
      inputText.value.value = ''
    }

    return {
      ...toRefs(testState),
      ...toRefs(todoState),
      inputText,
      emptyInput
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.inputText {
  height: 40px;
  font-size: 40px;
}
.buttonText {
  height: 40px;
  font-size: 30px;
}
</style>
